<template>
    <div class="back">
      <div class="top">
          <div class="left">
              <div class="list">
                  <div class="listcontext">
  
   
                          <router-link tag="div"  v-for="a in routerlist" :key="a.index" :to="a.routerto">  
                               <tag :title="a.title"/>
                          </router-link>
                 
                      
                      <pingfen/>
                  </div>
              </div>
          </div>
          <div class="right">
              <router-view></router-view>
              <!-- <paihang/> -->
          </div>
      </div>
      <div class="bottom">
          <div class="paihang">111</div>
          <div class="zhuangji">222</div>
          <div class="duibi">333</div>
          <div class="geren"></div>
      </div>
    </div>
  </template>
  
  <script>
      // import
      // import axios from "axios"
      import API from '../API/list.js'
  import paihang from './paihang.vue'
  import danhepaihang from './cpupaihang.vue'
  import tag from './tag.vue'
  import pingfen from './pingfen.vue'
  export default {
      name:"allpaihang",
      components:{
      paihang,
      tag,
      pingfen
      },
      data(){
          return{
              test:"11",
              neicun:true,
              xianka:true,
              cpu:true,
              open:"",
              routerlist:[{
                  title:"CPU",
                  routerto:"/paihang"
              },
              {
                  title:"GPU",
                  routerto:"/danhepaihang"
              },
              {
                  title:"内存",
                  routerto:"/duohepaihang"
              }
              ,
              {
                  title:"电源",
                  routerto:"/paihang"
              }
          ]
          }
      },
      
      methods:{
          selectneicun(){
              this.neicun=!this.neicun
          },
          selectxianka(){
              this.xianka=!this.xianka
          },
          selectcpu(){
              this.cpu=!this.cpu
          },
          // getDatas(){
          //    API.getData()
          // }
      //     get(){    //查询操作
      //   axios.get('http://192.168.31.226:8081/sys/gpu/listByIndex',{
        
      //     // params: {
            
      //     //   acc: this.$data.acc,
          
      //     // }
      //   }).then(res=>{
      //        console.log(res.data);   
          
      //   }).catch(err=>{
      //       alert("用户名或密码错误！" + err);
      //   })
      // },
      },
  
  }
  </script>
  
  <style scoped>
  .bottom{
  width: 100%;
  height: 10vh;
  background-color: aquamarine;
  justify-content: space-between;
  flex-direction: row;
  display: flex;
  }
  .top
  {
      display: flex;
  }
  .back{
      width: 1920rpx;
     height:1080rpx;
      display: flex;
      flex-direction: column;
  }
  .left{
  width: 70vw;
  display: flex;
  
  }
  .right{
      flex:1;
  
  }
  img{
      position: absolute;
      width: 100%;
        object-fit: contain;
  
  }
  .list{
      width: 400px;
      height: 90vh;
      position: absolute;
      z-index: 99;
  }
  .paihang{
  background-color: rgb(23, 190, 23);
  width: 25%;
      height: 100%;
  }
  .zhuangji{
      background-color: blanchedalmond;
      width: 25%;
      height: 100%;
  }
  .duibi{
      background-color: rgb(75, 190, 231);
      width: 25%;
      height: 100%;
  }
  .geren{
      background-color: rgb(231, 202, 75);
      width: 25%;
      height: 100%;
  }
  
  </style>